import React from "react";
import "./styles.css";
import styled from 'styled-components';
import {Text} from './poetry-text/Text'
import {PoetryProvider, usePoetry} from "./ poetry-hooks";
// import {WriteBox} from "./WriteBox";
import {PoetryTable} from "./PoetryTable";
import {PhonicsPanel} from "./phonics/Phonics";
import {Player} from "./Player";
import {Button, Position, Tooltip} from "@blueprintjs/core";
import {Keyboard} from "./keyboard";
import {transparentScrollbar} from "./style-mixins";


const StyledPoetryWrapper = styled.div`
display: grid;
grid-gap: 15px;
justify-content: center;
position: relative;
overflow: auto;
${transparentScrollbar()};
`;

const StyledContentPanel = styled.div`
height: 100vh;
display: flex;
flex-direction: column;
flex-grow: 1;
`;

export const StyledSwitchLeftPanel = styled.div`
position: absolute;
left: 5px;
top: 5px;
`;

const PoetryContentPanel = () => {
    const {toggleTable, playQueue, keyboard} = usePoetry();

    // const onMouseMove = e => {
    //     if(e.clientX < 30) {
    //         toggleTable()
    //     }
    // };

    return <div style={{display: 'flex'}}>
        <Player queue={playQueue}/>
        <PoetryTable/>
        <StyledContentPanel>
            <StyledPoetryWrapper>
                <StyledSwitchLeftPanel>
                    <Tooltip content="诗文列表" position={Position.RIGHT}>
                        <Button icon="menu" onClick={() => toggleTable()} minimal={true}/>
                    </Tooltip>
                </StyledSwitchLeftPanel>
                <Text/>
                {/*<WriteBox />*/}
            </StyledPoetryWrapper>
            {keyboard && <Keyboard/>}
        </StyledContentPanel>
        <PhonicsPanel/>
    </div>
};

export default function App() {
    return (
        <PoetryProvider>
            <PoetryContentPanel/>
        </PoetryProvider>
    );
}
